<template>
    <div id="watch">
      <p>FullName:{{ fullName }}</p>
      <p>FirstName:<input type="text" v-model="firstName"/></p>
      <p>LastName:<input type="text" v-model="lastName"/></p>
    </div>
</template>

<script>
    export default {
        name: "watch",
      data(){
          return{
            firstName:'hello',
            lastName:'world',
            fullName:''
          }
      },
      watch:{
          //watch有变化执行，没变化不执行
          //当修改firstName后，watch监听执行，修改变化的值
          firstName(newName,oldName){
            this.fullName = newName + ' '+ this.lastName;
          },
        lastName(newName,oldName){
          this.fullName = this.firstName + ' '+ newName;
        },
        //没变化也执行，最初绑定即执行，默认为false
        immediate:true,
        //深度监听
        //给对象的所有属性添加监听器，影响效率，默认为false
        //使用字符串形式监听，避免深度监听，"firstName"
        deep:true

      }
    }
</script>

<style scoped>

</style>
